<template>
  <el-dialog
    :close-on-click-modal="false"
    v-model="visibleDialog"
    :title="props.title"
    width="50%"
    draggable
    @close="closeDialog"
    style="min-width: 500px"
  >
    <el-scrollbar height="60vh">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="日志级别" prop="logLevel">
          {{ formData.logLevel }}
        </el-form-item>
        <el-form-item label="模块" prop="modular">
          {{ formData.modular }}
        </el-form-item>
        <el-form-item label="功能" prop="businessType">
          {{ formData.businessType }}
        </el-form-item>
        <el-form-item label="客户端 IP" prop="clientIp">
          {{ formData.clientIp }}
        </el-form-item>
        <el-form-item label="请求 URL" prop="url">
          {{ formData.url }}
        </el-form-item>
        <el-form-item label="请求体" prop="requestBody">
          {{ formData.requestBody }}
        </el-form-item>
        <el-form-item label="响应体" prop="responseBody">
          {{ formData.responseBody }}
        </el-form-item>
        <el-form-item label="响应结果" prop="responseCode">
          {{ formData.responseCode }}
        </el-form-item>
        <el-form-item label="错误信息" prop="errorMsg">
          {{ formData.errorMsg }}
        </el-form-item>
        <el-form-item label="请求时间" prop="requestTime">
          {{ formData.requestTime }}
        </el-form-item>
        <el-form-item label="请求耗时(毫秒)" prop="executionTime">
          {{ formData.executionTime }}
        </el-form-item>
        <el-form-item label="用户姓名" prop="createdUserName">
          {{ formData.createdUserName }}
        </el-form-item>
      </el-form>
    </el-scrollbar>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" :loading="loading" @click="handleSubmit"
          >确 定</el-button
        >
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import request from "@/utils/request";

defineOptions({
  name: "SYSOPERATELOGADDORUPDATE",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
  }
);

const rules = reactive({
  logLevel: [{ required: true, message: "请输入日志级别", trigger: "blur" }],
  applicationName: [{ required: true, message: "请输入应用", trigger: "blur" }],
  modular: [{ required: true, message: "请输入模块", trigger: "blur" }],
  businessType: [{ required: true, message: "请输入功能", trigger: "blur" }],
  info: [{ required: true, message: "请输入日志信息", trigger: "blur" }],
  clientIp: [{ required: true, message: "请输入客户端 IP", trigger: "blur" }],
  userAgent: [{ required: true, message: "请输入UserAgent", trigger: "blur" }],
  url: [{ required: true, message: "请输入请求 URL", trigger: "blur" }],
  httpMethod: [{ required: true, message: "请输入请求方法", trigger: "blur" }],
  requestPath: [{ required: true, message: "请输入", trigger: "blur" }],
  requestBody: [{ required: true, message: "请输入请求体", trigger: "blur" }],
  responseBody: [{ required: true, message: "请输入响应体", trigger: "blur" }],
  responseCode: [
    { required: true, message: "请输入响应结果", trigger: "blur" },
  ],
  pageRequest: [
    { required: true, message: "请输入请求是否为页面", trigger: "blur" },
  ],
  errorMsg: [{ required: true, message: "请输入错误原因", trigger: "blur" }],
  executionTime: [
    { required: true, message: "请输入请求耗时(毫秒)", trigger: "blur" },
  ],
  status: [{ required: true, message: "请输入", trigger: "blur" }],
  remarks: [{ required: true, message: "请输入备注", trigger: "blur" }],
  createdUserName: [
    { required: true, message: "请输入创建人姓名", trigger: "blur" },
  ],
  lastUpdatedUserName: [
    { required: true, message: "请输入最近一次更新人姓名", trigger: "blur" },
  ],
  serverName: [{ required: true, message: "请输入服务器", trigger: "blur" }],
  requestTime: [{ required: true, message: "请输入请求时间", trigger: "blur" }],
  classFunction: [
    { required: true, message: "请输入class_function", trigger: "blur" },
  ],
});

const formRef = ref(ElForm);

let formData = reactive({
  id: "",
  logLevel: "",
  applicationName: "",
  modular: "",
  businessType: "",
  info: "",
  clientIp: "",
  userAgent: "",
  url: "",
  httpMethod: "",
  requestPath: "",
  requestBody: "",
  responseBody: "",
  responseCode: "",
  pageRequest: "",
  errorMsg: "",
  executionTime: "",
  status: "",
  remarks: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  serverName: "",
  requestTime: "",
  classFunction: "",
});

watch(
  () => props.data,
  (newVal: any) => {
    if (newVal?.id) {
      const {
        id,
        logLevel,
        applicationName,
        modular,
        businessType,
        info,
        clientIp,
        userAgent,
        url,
        httpMethod,
        requestPath,
        requestBody,
        responseBody,
        responseCode,
        pageRequest,
        errorMsg,
        executionTime,
        status,
        remarks,
        createTime,
        createdUserId,
        createdUserName,
        lastUpdateTime,
        lastUpdatedUserId,
        lastUpdatedUserName,
        serverName,
        requestTime,
        classFunction,
      } = newVal;
      Object.assign(formData, {
        id,
        logLevel,
        applicationName,
        modular,
        businessType,
        info,
        clientIp,
        userAgent,
        url,
        httpMethod,
        requestPath,
        requestBody,
        responseBody,
        responseCode,
        pageRequest,
        errorMsg,
        executionTime,
        status,
        remarks,
        createTime,
        createdUserId,
        createdUserName,
        lastUpdateTime,
        lastUpdatedUserId,
        lastUpdatedUserName,
        serverName,
        requestTime,
        classFunction,
      });
    }
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}

/** 重置表单 */
function resetForm() {
  formRef.value.resetFields();
  formRef.value.clearValidate();
  formData.id = "";
  formData.logLevel = "";
  formData.applicationName = "";
  formData.modular = "";
  formData.businessType = "";
  formData.info = "";
  formData.clientIp = "";
  formData.userAgent = "";
  formData.url = "";
  formData.httpMethod = "";
  formData.requestPath = "";
  formData.requestBody = "";
  formData.responseBody = "";
  formData.responseCode = "";
  formData.pageRequest = "";
  formData.errorMsg = "";
  formData.executionTime = "";
  formData.status = "";
  formData.remarks = "";
  formData.createTime = "";
  formData.createdUserId = "";
  formData.createdUserName = "";
  formData.lastUpdateTime = "";
  formData.lastUpdatedUserId = "";
  formData.lastUpdatedUserName = "";
  formData.serverName = "";
  formData.requestTime = "";
  formData.classFunction = "";
}

const loading = ref(false);

/** 保存提交 */
function handleSubmit() {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      loading.value = true;
      const text = formData.id ? "编辑" : "新增";
      await request({
        url: "/system/sysoperatelog/save",
        method: "post",
        data: formData,
      }).finally(() => {
        loading.value = false;
      });
      ElMessage.success(text + `成功`);
      closeDialog();
      emit("reset-table");
    }
  });
}

/** 查询详细表 */
async function getDatails() {
  const data = await request({
    url: "/system/sysoperatelog/getDetails",
    method: "post",
    data: formData,
  });
  console.log(data);
}

onMounted(() => {
  if (formData.id) {
    getDatails();
  }
});

// 组件销毁时调用
onBeforeUnmount(() => {
  visibleDialog.value = false;
  emit("change-visible", false);
});
</script>

<style lang="scss" scoped>
:deep(.el-form-item__content) {
  word-break: break-word;
}
</style>
